<template>
	<div>
		<van-nav-bar title="提交订单" left-arrow @click-left="onClickLeft" />
		<!-- 门店选择 -->
		<div class="gradient-background px-[15px] pt-[15px]">
			<div class="bg-[#fff] p-[10px]" style="border-bottom: 1px dashed red;border-radius: 8px;">
				<div class="flex pb-[5px] justify-between" style="border-bottom: 1px solid #edf2fa;">
					<div class="bg-[#ffca28] text-[#fff] p-[2px]">门店配送</div>
					<div class="flex-1 ml-[15px] text-[#c0c0c0]" v-if="!shopInfo.id">请选择门店</div>
					<div class="flex-1 ml-[15px] text-[#c0c0c0]" v-if="shopInfo.id">{{ shopInfo.name }}({{ shopInfo.position }})
					</div>
					<div @click="showAddress = true;">点击切换</div>
				</div>
				<van-contact-card type="add" add-text="添加地址" @click="addAddress" v-if="!defaultAddress?.id" />
				<div v-else class="bg-[#fff] px-[20px] py-[10px] flex justify-between items-center">
					<div>
						<div class="flex text-[16px]">
							<div class="mr-[10px]">{{ defaultAddress.name }}</div>
							<div>{{ defaultAddress.tel }}</div>
						</div>
						<div class="flex text-[14px]">
							<div class="text-[red] mr-[10px]" v-if="defaultAddress.isDefault">[默认]</div>
							<div class="text-[#7b7b7b]">{{ defaultAddress.address }}</div>
						</div>
					</div>
					<van-icon @click="showPopup" name="edit" size="20" />
				</div>
			</div>
		</div>
		<main class="p-[15px] bg-[#edf2fa]">
			<!-- 商品信息 -->
			<div class="bg-[#fff] py-[10px]" style="border-radius: 8px;">
				<div class="text-[18px] font-bold pl-[15px]" style="border-bottom: 1px solid #edf2fa;">共{{ goodsNumSum }}件商品
				</div>
				<div class="p-[15px]">
					<div class="flex items-center justify-between pb-[10px]" style="border-bottom: 1px solid #f0f0f0;"
						v-for="item in cartShopList" :key="item.id">
						<img :src="item.banner" class="w-[80px] h-[80px]">
						<div class="flex-1 ml-[10px]">
							<div class="text-[16px]">{{ item.title }}</div>
							<div class="my-[5px]">{{ item.goodsNorm }}</div>
							<div class="text-[#e06c60] font-bold">¥ {{ item.goodsPrice }}</div>
						</div>
						<div>x {{ item.goodsNum }}</div>
					</div>
				</div>
			</div>
			<!-- 其他业务 -->
			<div class="mt-[10px]">
				<!-- 优惠券 -->
				<van-cell is-link title="优惠券" @click="show = true" />
				<!-- 开具发票 -->
				<van-cell is-link title="开具发票" @click="show = true" />
				<van-action-sheet v-model:show="show" title="优惠券">
					<div class="content">内容</div>
				</van-action-sheet>
				<div class="bg-[#fff] text-[16px] text-[#323233] text-[12px] p-[12px]">
					<div>备注信息</div>
					<van-field v-model="message" autosize type="textarea" placeholder="请输入留言" show-word-limit />
				</div>
			</div>
			<!-- 商品总价 -->
			<div class="mt-[10px]">
				<van-cell title="商品总价:" :value="`¥${totaLPrice}`" />
			</div>
		</main>
		<van-submit-bar :price="totaLPrice * 100" button-text="提交订单" @submit="payMethodShow = true" />

		<!-- 配送地址弹层 -->
		<van-popup v-model:show="showAddress" position="bottom" :style="{ height: '60%', paddingTop: '50px' }" closeable>
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list class="list overflow-auto" v-model:loading="loading" :finished="finished" @load="onLoad">
					<div class="content">
						<div :class="{ 'active': selectIndex == item.id }"
							class=" w-[100%] mt-[10px] p-[15px] bg-[#ffffff] rounded-[10px] flex text-[#a5a8ac] justify-between items-center"
							@click="changeShop(item)" v-for="item in list" :key="item.id">
							<div class="w-[65%]">
								<div class="text-[16px] font-bold text-[#464646]">{{ item.name }}({{ item.position }}店)</div>
								<div class="my-[8px]">{{ item.address }}</div>
								<div> <van-icon name="location-o" /> 营业时间：{{ dayjs(item.busineTime.split(",")[0]).format("HH:mm:ss") }}
									~
									{{ dayjs(item.busineTime.split(",")[1]).format("HH:mm:ss") }}</div>
							</div>
							<div class="w-[1px] h-[100px] bg-[#eeeeee]"></div>
							<div>
								<div class="text-[#ea718f] text-[16px] font-bold">进店选购</div>
								<div class="my-[5px]">距离{{ item.distance }}km</div>
								<div>
									<van-icon name="phone-circle" color="#e93323" size="25" />
									<van-icon name="location" color="#e93323" size="25" class="ml-[10px]" />
								</div>
							</div>
						</div>
					</div>
				</van-list>
			</van-pull-refresh>
		</van-popup>
		<!-- 地址弹层 -->
		<van-popup v-model:show="addresShow" position="bottom" :style="{ height: '50%', overflow: 'auto' }">
			<div class="flex">
				<h2 class="text-[18px] text-center py-[15px] flex-1">选择地址</h2>
				<div class="flex items-center px-[5px]" @click="addresShow = false"><van-icon name="cross" size="25" /></div>
			</div>
			<van-address-list v-model="chosenAddressId" :list="addressList" default-tag-text="默认" @add="onAdd"
				add-button-text="选择其他地址" right-icon="" @select="changeAddress" />
		</van-popup>
		<!-- 支付弹层 -->
		<van-action-sheet v-model:show="payMethodShow" title="选址付款方式">
			<van-radio-group v-model="checked">
				<van-cell-group inset>
					<van-cell title="微信支付" clickable @click="checked = 1">
						<template #right-icon>
							<van-radio :name="1" />
						</template>
					</van-cell>
					<van-cell title="支付宝支付" clickable @click="checked = 2">
						<template #right-icon>
							<van-radio :name="2" />
						</template>
					</van-cell>
				</van-cell-group>
			</van-radio-group>
			<div class="felx items-center text-center text-[18px] mt-[10px]">支付
				<span class="text-[#e06253] text-[22px]">¥{{ totaLPrice }}</span>
			</div>
			<div class="p-[10px]">
				<van-button round type="danger" class="w-[100%]" @click="goPay">去付款</van-button>
			</div>
		</van-action-sheet>
	</div>
</template>
<script setup>
import { ref, computed, getCurrentInstance } from 'vue';
import { QueryShopCart } from '@/api/cart'
const { proxy } = getCurrentInstance()
import { GetShopInfo } from "@/api/shopCate.js"
import { createOrderSn, AliPay } from '@/api/order'
import useStore from "@/store/index.js";
const { userInfo } = useStore()
import dayjs from 'dayjs'
const message = ref("")
const showAddress = ref(false)
const list = ref([]);
const show = ref(false)
const addresShow = ref(false)
const selectIndex = ref(16)
const shopInfo = ref({})
const chosenAddressId = ref()
const totaLPrice = ref(0)
const cartShopList = ref([])
const defaultAddress = computed(() => userInfo.getDefaultAddress)
const addressList = computed(() => userInfo.getAddress || [])
const goodsNumSum = ref(0)
const payMethodShow = ref(false)
const checked = ref(1)
// 分页下拉配置
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const total = ref(0)
const params = ref({
	page: 1,
	pageSize: 10
})

// 返回上级
const onClickLeft = () => {
	proxy.$router.back()
}
const onLoad = async () => {
	try {
		const res = await GetShopInfo(params.value)
		if (res.data.records || res.data.records) {
			list.value.push(...res.data.records)
			total.value = res.data.total
		}
		if (list.value.length >= total.value) {
			finished.value = true;
		}
		refreshing.value = false
		params.value.page++
	} catch (e) {
		loading.value = false
		finished.value = true
	}
};

const onRefresh = () => {
	// 清空列表数据
	finished.value = false;
	// 重新加载数据
	list.value = []
	// 将 loading 设置为 true，表示处于加载状态
	loading.value = true;
	params.value.page = 1
	onLoad();
};


// 选择门店功能
const changeShop = (row) => {
	shopInfo.value = { ...row }
	selectIndex.value = row.id
	showAddress.value = false
}

const showPopup = () => {
	addresShow.value = true
}

const onAdd = () => {
	proxy.$router.push("/addressList")
}
// 改变选中地址
const changeAddress = (row, index) => {
	userInfo.updateAddressIndex(index)
	addresShow.value = false
}
// 查询购物车
const lookPayCart = async () => {
	const res = await QueryShopCart()
	res.data.records.forEach(item => {
		goodsNumSum.value += item.goodsNum
	})
	totaLPrice.value = res.data.records.reduce((acc, cur) => {
		return acc + cur.goodsPrice * cur.goodsNum;
	}, 0);
	cartShopList.value = res.data.records
}
lookPayCart()
// 支付
const goPay = () => {
	alipay()
}
// 支付宝支付
const alipay = async () => {
	const data = {}
	data.shopId = shopInfo.value.id
	data.addresId = defaultAddress.value.id
	data.goodsDetail = cartShopList.value
	data.totalPrice = totaLPrice.value
	data.payType = checked.value
	const res = await createOrderSn(data)
	const payAddres = await AliPay({ orderSn: res.data })
	document.write(payAddres.data)
}
</script>
<style scoped lang="scss">
.gradient-background {
	height: 100%;
	background: linear-gradient(to bottom, red, white);
}

main {
	height: calc(100vh - 118px);
}



:deep(.van-submit-bar__bar) {
	height: 60px !important;
}

:deep(.van-field__body) {
	background: #f3f3f3;
}

.content {
	padding: 10px;
	height: 54.5vh;
	background: #f3f3f3;
}

.active {
	border: 1px solid #e93323;
}
</style>